<script setup>
import { onMounted, ref, reactive, computed } from 'vue'
import { message } from 'ant-design-vue'
import { addUser, getRole, getUserDetailById, editUser } from '@/api/users.js'
// 宏命令
const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false
  },
  id: {
    type: [Number, String]
  }
})
// console.log(props.id)
const showTitle = computed(() =>
  // console.log(props.id)
  props.id ? '编辑员工' : '添加员工'
)
// 获取详情的方法
const getUserDetail = async (id) => {
  const res = await getUserDetailById(id)
  console.log(res)
  formData.name = res.data.name
  formData.userName = res.data.userName
  formData.phonenumber = res.data.phonenumber
  formData.roleId = res.data.roleId
  formData.status = res.data.status
}
defineExpose({
  getUserDetail
}) //定义子组件向外抛出的内容

// 定义表单数据
const formData = reactive({
  name: '',
  userName: '',
  phonenumber: '',
  roleId: 0,
  status: 0
})
const formRef = ref(null) //声明的变量

// 获取员工角色
let getRoles = ref([])
const getRoleApi = async () => {
  const res = await getRole()
  getRoles.value = res.data
  console.log(res.data)
}
// 校验通过  添加员工
const onFinish = async (values) => {
  // 判断有没有id
  if (props.id) {
    // 编辑 用户
    await editUser({ ...formData, id: props.id })
    message.success('编辑用户成功')
  } else {
    await addUser(values)
    message.success('添加用户成功')
  }
  console.log(values)
  emit('addSuccess') //通知父组件更新
  btnCancel() //关闭弹层
}
const emit = defineEmits(['update:showDialog', 'addSuccess', 'update:id'])
// 点击取消关闭弹层
const btnCancel = () => {
  // 清空表单
  formRef.value?.resetFields()
  // 通知父组件关闭弹层,在 父组件监听update:showDialog这个事件
  emit('update:showDialog', false) //通知父组件将showDialog改成false
  emit('clearId')
}

onMounted(async () => {
  await getRoleApi()
})
</script>
<template>
  <a-modal @cancel="btnCancel" :title="showTitle" :visible="props.showDialog" :footer="null">
    <a-form ref="formRef" :model="formData" @finish="onFinish">
      <a-form-item
        label="员工姓名"
        name="name"
        :rules="[{ required: true, message: '请输入员工姓名' }]"
      >
        <a-input v-model:value="formData.name" placeholder="请输入员工姓名"></a-input>
      </a-form-item>
      <a-form-item
        label="登录账号"
        name="userName"
        :rules="[{ required: true, message: '请输入登录账号' }]"
      >
        <a-input v-model:value="formData.userName" placeholder="请输入登录账号"></a-input>
      </a-form-item>
      <a-form-item
        label="联系方式"
        name="phonenumber"
        :rules="[{ required: true, message: '请输入联系方式' }]"
      >
        <a-input v-model:value="formData.phonenumber" placeholder="请输入联系方式"></a-input>
      </a-form-item>
      <div class="pswd">
        <span v-if="!props.id">默认密码：123456</span>
      </div>
      <a-form-item
        label="分配角色"
        name="roleId"
        :rules="[{ required: true, message: '请选择分配角色', trigger: 'change' }]"
      >
        <a-select placeholder="请选择角色" v-model:value="formData.roleId">
          <a-select-option v-for="item in getRoles" :key="item.roleId" :value="item.roleId">
            {{ item.roleId }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="员工状态"
        name="status"
        :rules="[{ required: true, message: '请输入员工状态' }]"
      >
        <a-radio-group v-model:value="formData.status" placeholder="请输入员工状态">
          <a-radio :value="0">禁用</a-radio>
          <a-radio :value="1">启用</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item>
        <a-row type="flex" justify="end">
          <a-space>
            <a-button @click="btnCancel" style="border-radius: 5px">取消</a-button>
            <a-button type="primary" style="border-radius: 5px" html-type="submit">确定</a-button>
          </a-space>
        </a-row>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<style scoped lang="less">
.pswd {
  margin-bottom: 20px;
}
</style>
